<template>
  <section class="yl-clearfix">
    <section class="searchgrid">

      <div class="yl-float-right">
        <input v-model="filters.keyword" type="text" placeholder="客户手机号/子账号ID">
        <input class="yl-input-button" value=" 查询 " type="button" @click="fetchAgentServiceFeeList">
        <input class="yl-input-button" value=" 导出Excel " type="button" @click="">
      </div>

    </section>
      <!--列表-->
    <el-table :data="pagination.data"
              v-loading="loading"
              style="width: 100%;">
      <el-table-column prop="client.cellphone" label="手机号">
      </el-table-column>
      <el-table-column prop="stock_finance_id" label="子账号ID">
      </el-table-column>
      <el-table-column prop="myFee" label="服务费提成">
      </el-table-column>
      <el-table-column prop="parent_entrust_datetime" label="交易时间">
      </el-table-column>
      <el-table-column label="买卖类型">
        <template scope="scope">
          {{sellOption[scope.row.sell_buy]}}
        </template>
      </el-table-column>
      <el-table-column prop="parent_entrust_id" label="委托编号">
      </el-table-column>
      <el-table-column prop="total_bargin_amount" label="成交金额">
      </el-table-column>
      <el-table-column prop="commison" label="佣金">
      </el-table-column>

    </el-table>


    <div class="yl-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="pagination.current_page"
        :page-sizes="[15, 30, 45, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="parseInt(pagination.per_page)"
        :total="pagination.total"
        style="float:right;">
      </el-pagination>
    </div>


  </section>


</template>

<script>
  import {getAgentServiceFeeList} from '../../api/agent';

  export default {
    data() {
      return {
        sellOption: [
          '其他',
          '买入',//1
          '卖出'//2
        ],
        filters: {
          keyword: null,
          page: 1,
          size: 15
        },
        pageIndex: 1,
        pagination: {},
        loading: false,
      }
    },

    methods: {
      fetchAgentServiceFeeList() {
        this.loading = true;
        let params = this.filters;
        getAgentServiceFeeList({params}).then(res => {
          this.pagination = res.data;
          this.loading = false;
        }).catch(error => this.ezNotifyAxiosCatch(error));
      },
      handleSizeChange(size) {
        this.filters.size = size;
        this.filters.page = 1;
        this.fetchAgentServiceFeeList();
      },
      handlePageChange(clickPageIndex) {
        this.filters.page = clickPageIndex;
        this.fetchAgentServiceFeeList();
      },

    },
    mounted() {
      this.fetchAgentServiceFeeList();
    }
  }
</script>

